import React, { Component } from 'react';
import RiskSlider from '../riskslider/RiskSlider';
import { Scroll, ModalOpenButton } from '../common-ui-parts';
import CommonConstants from '../../constants/CommonConstants';
import AlcoholAmount from '../simulation-modal/AlcoholAmount';
import ExerciseHabit from '../simulation-modal/ExerciseHabit';
import HeadLine from '../common-ui-parts/HeadLine';
import { FiveHealthHabitButtons } from '../common-ui-parts/index';

/**
 * シミュレーション：5つの健康習慣
 */
class Simulation extends Component {
  constructor(props) {
    super(props);

    this.state = {
      openModal: undefined,
      count: props.fiveHealtHabitFlgs.count,
      currnet: '',
    };
  }

  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const {inputData, risk, initialRisk, fiveHealtHabitFlgs, decimalDigit=2} = this.props;
    const {minWeight, maxWeight} = initialRisk.diagnosis.okWeightRange;

    return (
      <div className="Simulation">
        <RiskSlider
          current={risk.probability.you}
          initial={initialRisk.probability.you}
          min={initialRisk.probability.min}
          max={initialRisk.probability.max}
        />
        <AlcoholAmount
          open={this.state.openModal === CommonConstants.ALCOHOL_AMOUNT_CHANGE}
          modalInputData={inputData}
          modalCallBack={this._calcRiskForModal.bind(this)}
        />
        <ExerciseHabit
          open={this.state.openModal === CommonConstants.EXERCISE_HABIT_CHANGE}
          modalInputData={inputData}
          modalCallBack={this._calcRiskForModal.bind(this)}
        />
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.SIMULATION}
          customStyle={CommonConstants.SCROLL_Z}
        >
          {/* あなた(現状) */}
          <div className="report-card">
            <div className="card-content">
              <p className="guidance-simulation">
                以下の選択可能な項目を変更することで、リスクがどのくらい変動するか確認いただけます。
              </p>
              <HeadLine
                level={2}
                others={{ style: { paddingTop: '37px' } }}
              >
                {`あなた ${risk.probability.you.toFixed(1)}%`}
              </HeadLine>

              <div className="input-five-helth-habit">
                <h4 className="count-title" >
                  あなたは<span className="count">{this.state.count}個</span>実践中
                </h4>

                <FiveHealthHabitButtons
                  onChange={this._handleChange.bind(this)}
                  markValue={initialRisk.diagnosis}
                  defaultValue={fiveHealtHabitFlgs}
                />

                <div className="comment">
                  { this.state.current === 'okSmoking' &&
                    <div>
                      <p>喫煙は、多くのがんの発生のリスクを上げることがわかっています。吸っている人は禁煙を。吸わない人も煙草の煙を避けるようにしましょう。</p>
                      <p>＊20年以上の禁煙で非喫煙状態と同等までがんのリスクが低下するとの報告が多数あります。長く禁煙することで非喫煙状態に近づくと想定してリスクの変化を見てみましょう。</p>
                    </div>
                  }
                  { this.state.current === 'okActivity' &&
                    <div>
                      <p>1日に男性は「37.5メッツ・時」、女性は「31.9メッツ・時」以上身体を動かしましょう。回答した現在の状況から、生活のなかの身体活動のパターンを変えて、考え直してみましょう。</p>
                      <div className="report-content" style={{ textAlign: 'center', margin: '20px 0 40px 0' }}>
                        <ModalOpenButton
                          label={'運動習慣を見直す'}
                          onTouchTap={() => this._openModal(CommonConstants.EXERCISE_HABIT_CHANGE)}
                        />
                      </div>
                    </div>
                  }
                  { this.state.current === 'okBmi' &&
                    <div>
                      <p>BMI値は男性で21以上〜27未満、女性で19以上~25未満が適正な値です。ここから求められるあなたの適正な体重は</p>
                      <p className="strong">{minWeight.toFixed(decimalDigit)}以上 ～ {maxWeight.toFixed(decimalDigit)}kg未満</p>
                      <p>の範囲です。</p>
                    </div>
                  }
                  { this.state.current === 'okSalineFood' &&
                    <div>
                      <p>塩分濃度が特に高い塩蔵品を摂取することも、胃がんなどのがんの発生リスクをあげてしまいます。「たらこ」で考えると、適切なのは1週間に1回未満の摂取です。</p>
                    </div>
                  }
                  { this.state.current === 'okAlcohol' &&
                    <div>
                      <p>お酒はエタノール量換算で週あたり150g未満になるようにしましょう。回答した現在の状況から、お酒の種類と量、飲む頻度を考え直してみましょう。</p>
                      <div className="report-content" style={{ textAlign: 'center', margin: '20px 0 40px 0' }}>
                        <ModalOpenButton
                          label={'お酒の飲み方を見直す'}
                          onTouchTap={() => this._openModal(CommonConstants.ALCOHOL_AMOUNT_CHANGE)}
                        />
                      </div>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        </Scroll>
      </div>
    );
  }

  _openModal = (name) => {
    this.setState({ openModal: name });
  }

  _handleChange(key, value, count) {
    const {fiveHealtHabitFlgs} = this.props;
    this._calcRisk({
      inputFiveHealtHabitFlgs: { ...fiveHealtHabitFlgs, [key]: value, count },
    });
    this.setState({
      count: count,
      current: key,
      openModal: undefined,
    });
  }

  _calcRiskForModal({ isOk, modalInputData }) {
    if (isOk) {
      this._calcRisk({modalInputData});
    }
    this.setState({ openModal: undefined });
  }

  _calcRisk({modalInputData, inputFiveHealtHabitFlgs}) {
    const {inputData, fiveHealtHabitFlgs, onCalcRisk} = this.props;
    const data = modalInputData || inputData;
    const flgs = inputFiveHealtHabitFlgs || fiveHealtHabitFlgs;
    onCalcRisk(data, flgs);
  }
}
/*
Simulation.propTypes = {
  inputData: React.PropTypes.object.isRequired,
  fiveHealtHabitFlgs: React.PropTypes.shape({
    okSmoking: React.PropTypes.bool.isRequired,
    okAlcohol: React.PropTypes.bool.isRequired,
    okBmi: React.PropTypes.bool.isRequired,
    okActivity: React.PropTypes.bool.isRequired,
    okSalineFood: React.PropTypes.bool.isRequired,
    count: React.PropTypes.number.isRequired,
  }),
  risk: React.PropTypes.shape({
    probability: React.PropTypes.shape({
      you: React.PropTypes.number.isRequired,
      min: React.PropTypes.number.isRequired,
      max: React.PropTypes.number.isRequired,
    }),
  }),
  initialRisk:  React.PropTypes.shape({
    probability: React.PropTypes.shape({
      you: React.PropTypes.number.isRequired,
      min: React.PropTypes.number.isRequired,
      max: React.PropTypes.number.isRequired,
    }),
  }),
  onCalcRisk: React.PropTypes.func.isRequired,
};*/

export default Simulation
